#@adminLayout()
#define main()
<div class="jbolt_page">
    <div class="jbolt_page_content">


        <!-- 基础信息 start -->
        <div class="col-12">
            <form class="form" id="becRetailerTypeForm"  action="/auth/mall/retailer/type/update" method="post" onsubmit="return RefreshsubmitForm(this);">
                #if(retailerType.id??)
                <input type="hidden" name="retailerType.id" value="#(retailerType.id)" />
                #end
                <div class="form-group row">
                    <label class="col-3 col-form-label">商家类别</label>
                    <div class="col-8">
                        <input type="text" autocomplete="off"  class="form-control" data-rule="required" data-tips="请输入商家类别" name="retailerType.name" value="#(retailerType.name)" >
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label">备注</label>
                    <div class="col-8">
                        <textarea type="text" autocomplete="off"  class="form-control"  maxlength="40" name="retailerType.memo" value="#(retailerType.memo)">#(retailerType.memo)</textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label">分类排序</label>
                    <div class="col-8">
                        <input type="number" autocomplete="off" min="0"  max="100000000000"  class="form-control"    name="retailerType.displayorder" value="#(retailerType.displayorder)">
                    </div>
                </div>

                <div class="form-group text-center">
                    <button type="submit"   class="btn btn-success" ><i class="fa fa-check mr-2"></i>提交</button>
                </div>
            </form>




                <!-- 基础信息 end -->

                <!-- 图片 start -->


            <form  onsubmit="return false;"  id="retailerTypeFormImg" action="/auth/mall/retailer/type/update" method="post">

                #if(retailerType.id??)
                <input type="hidden" name="retailerType.id" value="#(retailerType.id)" />
                #end
                <input type="hidden"  data-rule="required" readonly="readonly" data-tips="请选择图片上传" name="retailerType.image" id="imgUploadDemo"  class="form-control"/>
                <small class="text-danger">点击上传图片</small>
                <img id="image" tooltip data-title="点击查看大图" src="#realImage(retailerType.image??,'/assets/img/uploadimg.png')" alt="" style="width: 300px;height: 250px">

            </form>


            <input  type="file" name="file" id="file" accept="image/*" value="选择文件" >

            <div class="form-group text-center">
                <button type="button" id="upload" value="upload" class="btn btn-success" ><i class="fa fa-check mr-2"></i>提交</button>
            </div>


        </div>



        <!-- 图片end -->



    </div>
</div>
#end

#define js()
<script type="text/javascript" src="/assets/js/jquery-min.js"></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>

<script type="text/javascript">

    var inputBox = document.getElementById("file");
    var img = document.getElementById("image");
    $(function () {
        $("#file").on("change", function ()  {
            var reader = new FileReader();
            reader.readAsDataURL(inputBox.files[0]);//发起异步请求
            reader.onload = function () {
                //读取完成后，将结果赋值给img的src
                img.src = this.result
            }
        })
    })




    $(function () {
        $("#upload").on("click", function () {
            var obj = $("#file");
            var fileName = obj.val();//上传的本地文件绝对路径
            if (obj ==null)
                alert("请上传图片！！！");
            else{
                var suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length);//后缀名
                var file = obj.get(0).files[0];	                                           //上传的文件
                var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
                    / (1024 * 1024)).toFixed(2) + 'MB' : (file.size
                    / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';		   //文件上传大小
                //七牛云上传


                $.ajax({
                    type: 'post',
                    url: "/auth/mall/Qn/QiniuUpToken",
                    data: {"suffix": suffix},
                    dataType: 'json',
                    success: function (result) {

                        if (result.success == 1) {

                            var observer = {
                                //设置上传过程的监听函数

                                next(result) {                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                                    Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                                },
                                error(err) {

                                    alert("上传失败！" + err.message);
                                },
                                complete(res) {
                                    //成功后
                                    // ?imageView2/2/h/100：展示缩略图，不加显示原图
                                    // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高

                                    $("#image").attr("src", "http://" + result.domain + "/" + result.imgUrl + "?i");
                                    $("#imgUploadDemo").val("http://" + result.domain + "/" + result.imgUrl + "?i");
                                    RefreshsubmitForm(retailerTypeFormImg);
                                }
                            };
                            var putExtra = {
                                fname: "",                          //原文件名
                                params: {},                         //用来放置自定义变量
                                mimeType: null                      //限制上传文件类型
                            };
                            var config = {
                                region: qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                                concurrentRequestLimit: 3            //分片上传的并发请求量
                            };
                            var observable = qiniu.upload(file, result.imgUrl, result.token, putExtra, config);
                            var subscription = observable.subscribe(observer);          // 上传开始
                            // 取消上传
                            // subscription.unsubscribe();


                        } else {

                            alert("获取凭证失败！！！");                  //获取凭证失败
                        }


                    }, error: function () {                             //服务器响应失败处理函数
                        alert("服务器繁忙");
                    }
                });
            }
        })

    })


</script>


#end